<template>
  <div class="risk-card">
    <div class="risk-content">
      <div class="score-circle" :class="scoreClass">
        <svg class="progress-ring" width="100" height="100">
          <circle
            class="progress-ring-bg"
            cx="50"
            cy="50"
            r="42"
          />
          <circle
            class="progress-ring-circle"
            :class="scoreClass"
            cx="50"
            cy="50"
            r="42"
            :style="{ strokeDashoffset: progressOffset }"
          />
        </svg>
        <div class="score-content">
          <div class="score-value">{{ score }}</div>
        </div>
      </div>
      
      <div class="risk-info">
        <div class="risk-level" :class="scoreClass">
          <span class="level-icon">{{ levelIcon }}</span>
          <span class="level-text">{{ levelText }}</span>
        </div>
        <div class="stats-mini">
          <span class="stat-item critical" v-if="criticalCount > 0">
            🔥 {{ criticalCount }}
          </span>
          <span class="stat-item high" v-if="highCount > 0">
            ⚠️ {{ highCount }}
          </span>
          <span class="stat-item medium" v-if="mediumCount > 0">
            🟡 {{ mediumCount }}
          </span>
          <span class="stat-item total">
            📊 {{ totalCount }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  results: {
    type: Array,
    required: true
  }
})

const severityWeights = {
  critical: 5,
  high: 4,
  medium: 3,
  low: 2,
  info: 1
}

const score = computed(() => {
  if (props.results.length === 0) return 0
  
  const maxPossible = props.results.length * severityWeights.critical
  let totalWeight = 0
  
  props.results.forEach(result => {
    const severity = result.severity || 'medium'
    totalWeight += severityWeights[severity] || severityWeights.medium
  })
  
  return Math.min(Math.round((totalWeight / maxPossible) * 100), 100)
})

const scoreClass = computed(() => {
  if (score.value > 80) return 'critical'
  if (score.value >= 60) return 'high'
  if (score.value >= 40) return 'medium'
  if (score.value >= 20) return 'low'
  return 'safe'
})

const levelText = computed(() => {
  if (score.value > 80) return '极度危险'
  if (score.value >= 60) return '高风险'
  if (score.value >= 40) return '中等风险'
  if (score.value >= 20) return '低风险'
  return '安全'
})

const levelIcon = computed(() => {
  if (score.value > 80) return '🔥'
  if (score.value >= 60) return '🛑'
  if (score.value >= 40) return '⚠️'
  if (score.value >= 20) return '🟡'
  return '✅'
})

const progressOffset = computed(() => {
  const circumference = 2 * Math.PI * 42
  return circumference - (score.value / 100) * circumference
})

const criticalCount = computed(() => 
  props.results.filter(r => r.severity === 'critical').length
)

const highCount = computed(() => 
  props.results.filter(r => r.severity === 'high').length
)

const mediumCount = computed(() => 
  props.results.filter(r => r.severity === 'medium').length
)

const totalCount = computed(() => props.results.length)
</script>

<style scoped>
.risk-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: 16px;
}

.risk-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.score-circle {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 8;
}

.progress-ring-circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease, stroke 0.3s ease;
  stroke-dasharray: 264;
}

.progress-ring-circle.critical { stroke: #ef4444; }
.progress-ring-circle.high { stroke: #f97316; }
.progress-ring-circle.medium { stroke: #eab308; }
.progress-ring-circle.low { stroke: #22c55e; }
.progress-ring-circle.safe { stroke: #10b981; }

.score-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.score-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.score-circle.critical .score-value { color: #ef4444; }
.score-circle.high .score-value { color: #f97316; }
.score-circle.medium .score-value { color: #eab308; }
.score-circle.low .score-value { color: #22c55e; }
.score-circle.safe .score-value { color: #10b981; }

.risk-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-level {
  display: flex;
  align-items: center;
  gap: 8px;
}

.level-icon {
  font-size: 24px;
}

.level-text {
  font-size: 18px;
  font-weight: 700;
}

.risk-level.critical .level-text { color: #ef4444; }
.risk-level.high .level-text { color: #f97316; }
.risk-level.medium .level-text { color: #eab308; }
.risk-level.low .level-text { color: #22c55e; }
.risk-level.safe .level-text { color: #10b981; }

.stats-mini {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f9fafb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
}

.stat-item.critical { color: #ef4444; border-color: #fecaca; background: #fef2f2; }
.stat-item.high { color: #f97316; border-color: #fed7aa; background: #fff7ed; }
.stat-item.medium { color: #eab308; border-color: #fde68a; background: #fefce8; }
.stat-item.total { color: #3b82f6; border-color: #bfdbfe; background: #eff6ff; font-weight: 700; }
</style>
  